/* 先获取元素 */
let apibox = document.querySelector(".api-box");
let apiin = document.querySelector("#api-in");
let apitext = document.querySelector(".api-text");

let list = document.querySelector(".main-list");
let form=document.querySelector('form')
/* 定义变量保存所有span的数据 */

let apispan = [
	{ name: "全部", keyword: "身份证实名", isnew: false },
	{ name: "生活服务", keyword: "银行卡", isnew: false },
	{ name: "金融科技", keyword: "短信", isnew: false },
	{ name: "交通地理", keyword: "天气", isnew: false },
	{ name: "充值缴费", keyword: "短信", isnew: false },
	{ name: "数据智能", keyword: "手机归属地", isnew: false },
	{ name: "企业工商", keyword: "IP", isnew: false },
	{ name: "应用开发", keyword: "手机归属地", isnew: false },
	{ name: "电子商务", keyword: "IP", isnew: false },
	{ name: "吃喝玩乐", keyword: "视频", isnew: false },
	{ name: "文娱视频", keyword: "视频", isnew: false },
	{ name: "免费接口大全", keyword: "短信", isnew: true },
	{ name: "短信", keyword: "身份证实名", isnew: false },
	{ name: "汽车", keyword: "银行卡", isnew: false },
	{ name: "核验", keyword: "银行卡", isnew: false },
	{ name: "最新发布", keyword: "银行卡", isnew: true },
	{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
];

function color(arr) {
	/* 定义变量保存渲染代码片段 */
	let html = ``;

	//遍历数组然后将所有值渲染
	arr.forEach(function (v, i) {
		html += `
        <span data-keyword=${v.keyword} class='${v.isnew ? "bold" : " "}'>  ${
			v.name
		}  </span>
        `;
	});

	apibox.innerHTML = html;

	//使用事件委派,给api-box注册点击事件  判断点击的目标
	apibox.addEventListener("click", function (e) {
		//判断当前点击的目标是不是span
		if (e.target.tagName === "SPAN") {
			//如果是那么apitext的文本内容就是点击到span的文本内容
			apitext.textContent = e.target.textContent;
			apiin.placeholder = e.target.dataset.keyword;
		}
	});
}

color(apispan);

/* 
api img 数据渲染
1.先定义数据
 */

let listDat = [
	//第一行
	{
		img: "API_01.jpg",
		name: "2021出行防疫政策指南",
		price: "免费",
		isSpecial: false,
	},
	{
		img: "API_02.jpg",
		name: "身份证实名认证",
		price: "￥0.2000/次",
		isSpecial: true,
	},
	{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
	{
		img: "API_04.jpg",
		name: "银行卡四元素校验",
		price: "￥0.3360/次",
		isSpecial: true,
	},
	{
		img: "API_05.jpg",
		name: "短信API服务",
		price: "￥0.0400/次",
		isSpecial: true,
	},

	//第二行
	{
		img: "API_01.jpg",
		name: "2021出行防疫政策指南",
		price: "免费",
		isSpecial: false,
	},
	{
		img: "API_02.jpg",
		name: "身份证实名认证",
		price: "￥0.2000/次",
		isSpecial: true,
	},
	{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
	{
		img: "API_04.jpg",
		name: "银行卡四元素校验",
		price: "￥0.3360/次",
		isSpecial: true,
	},
	{
		img: "API_05.jpg",
		name: "短信API服务",
		price: "￥0.0400/次",
		isSpecial: true,
	},
	//第三行
	{
		img: "API_01.jpg",
		name: "2021出行防疫政策指南",
		price: "免费",
		isSpecial: false,
	},
	{
		img: "API_02.jpg",
		name: "身份证实名认证",
		price: "￥0.2000/次",
		isSpecial: true,
	},
	{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
	{
		img: "API_04.jpg",
		name: "银行卡四元素校验",
		price: "￥0.3360/次",
		isSpecial: true,
	},
	{
		img: "API_05.jpg",
		name: "短信API服务",
		price: "￥0.0400/次",
		isSpecial: true,
	},
	//第四行
	{
		img: "API_01.jpg",
		name: "2021出行防疫政策指南",
		price: "免费",
		isSpecial: false,
	},
	{
		img: "API_02.jpg",
		name: "身份证实名认证",
		price: "￥0.2000/次",
		isSpecial: true,
	},
	{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
	{
		img: "API_04.jpg",
		name: "银行卡四元素校验",
		price: "￥0.3360/次",
		isSpecial: true,
	},
	{
		img: "API_05.jpg",
		name: "短信API服务",
		price: "￥0.0400/次",
		isSpecial: true,
	},
];

function listcolor(arr) {
	/* 定义变量保存代码片段 */
	let html = ``;

	arr.forEach(function (v) {
		html += `
        <li class="df">
            <span class="${v.isSpecial ? 'zyb': 'zyn'}">企业专用</span>
            <a href='../datails/datails.html'><img src="../../assets/imgs/${v.img}">
                <P>${v.name}</P>
                <P class="${v.isSpecial ? 'apinofree': 'apifree'}">${v.price}</P>
            </a>
            <button id='btn'>申请数据</button>
        </li> 
        `;
	});

    list.innerHTML=html
}

listcolor(listDat)

//模态框获取元素
let apimtk=document.querySelector('.apimtk')
let btn=document.querySelectorAll('#btn')

let actizh=document.querySelector('.actizh')
let activation1=document.querySelector('.activation1')
let actism=document.querySelector('.actism')
let activation=document.querySelector('.activation')
let loginsmdl=document.querySelector('.login-smdl')
let loginzhdl=document.querySelector('.login-zhdl')


let mtkbtn=document.querySelector('.mtk-btn')
let telvalue=document.querySelector('.telvalue')
let passvalue=document.querySelector('.passvalue')
let num=document.querySelector('.num')
let password=document.querySelector('.password')
let qts=document.querySelector('.qts')
let qczh=document.querySelector('.qczh')
let qcmm=document.querySelector('.qcmm')

/* 给所有的btn注册点击事件 */
btn.forEach(function(v){

    v.addEventListener('click',function(){
        apimtk.style.display='block'
    })

})

/* 给模态框注册点击事件点击隐藏 */
apimtk.addEventListener('click',function(e){
   
    if(e.target.className==='apimtk'){
        apimtk.style.display='none'
		password.value=''
		num.value=''
		telvalue.style.display='none'
    }

})

/* 点击账号登录隐藏扫码登录 */
actizh.addEventListener('click',function(){

    activation1.style.display='block'
    activation.style.display='none'
    loginzhdl.style.display='block'
    loginsmdl.style.display='none'
})
/* 点击扫码登录隐藏账号登录 */
actism.addEventListener('click',function(){

    activation1.style.display='none'
    activation.style.display='block'
    loginzhdl.style.display='none'
    loginsmdl.style.display='block'
})

/* 倒计时 */

mtkbtn.addEventListener('click',function(){

    if(num.value.length>1 && num.value.length==11){
       /*  telvalue.style.display='none' */
		qts.style.display='none'
        
    }else{
       /*  telvalue.style.display='block' */
	   qts.style.display='block'
	   qts.textContent='输入正确手机号'
	   num.value=''
	   setTimeout(function(){

		qts.style.display='none'
		

	   },2000)
        return
    }

    

    if(password.value.length>4){
       /*  passvalue.style.display='none' */
	   qts.style.display='none'
        
    }else{
        /* passvalue.style.display='block' */
		qts.style.display='block'
		qts.textContent='输入4位以上数字密码'
		password.value=''
		setTimeout(function(){

			qts.style.display='none'

		},2000)

        return
    } 
	setTimeout(function(){
		num.value=''
	    password.value=''
	    location.href='../home/home.html'

	},2000)
        qts.style.display='block'
		qts.textContent=`即将跳转`
	
})

num.addEventListener('input',function(){
	
	if (num.value.length>=1) {
		qczh.style.display='block'
		qczh.addEventListener('click',function(){
			num.value=''
			qczh.style.display='none'
		})
	}else{
		qczh.style.display='none'
	}
})

password.addEventListener('input',function(){
	
	if (password.value.length>=1) {
		qcmm.style.display='block'
		qcmm.addEventListener('click',function(){
			password.value=''
			qcmm.style.display='none'
		})
	}else{
		qcmm.style.display='none'
	}
})

